<template>
  <div class="login">
    <div class="login_box">
      <!-- 用户身份 -->
      <div class="identity">
        <el-radio v-model="radio" label="1">管理员</el-radio>
        <el-radio v-model="radio" label="2">用户</el-radio>
        <el-radio v-model="radio" label="3">企业</el-radio>
      </div>
      <!-- 用户账号 -->
      <el-form class="login_form">
        <el-form-item label="账号" label-width="60px" prop="username">
          <el-input
            prefix-icon="el-icon-user"
            v-model="loginData.userName"
            placeholder="请输入账号"
          ></el-input>
        </el-form-item>
        <!-- 用户密码 -->
        <el-form-item label="密码" label-width="60px" prop="password">
          <el-input
            prefix-icon="el-icon-lock"
            v-model="loginData.passWord"
            show-password
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <!-- 登录，注册按钮 -->
        <el-form-item class="login_butt">
          <!-- 回车键盘监听 -->
          <!-- @keyup.enter="login('loginFormRef')" -->
          <el-button type="primary" @click="login()">登录</el-button>
          <el-button type="info" @click="reset()">重置</el-button>
          <el-button type="success" @click="openDialog()">注册</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!--管理员注册表单-->
    <el-dialog
      title="注册"
      :close-on-click-modal="false"
      :visible.sync="adminDialog"
      :append-to-body="true"
    >
      <el-form status-icon>
        <el-form-item label="账 号" prop="iphone">
          <el-input type="text" v-model="adminRegisterInfo.iphone"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="passWord">
          <el-input
            show-password
            v-model="adminRegisterInfo.passWord"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="rePassWord">
          <el-input
            type="password"
            v-model="adminRegisterInfo.rePassWord"
          ></el-input>
        </el-form-item>
      </el-form>
      <div class="register-button" slot="footer">
        <el-button @click="reset()">重 置</el-button>
        <el-button type="primary" @click="register()">立即注册</el-button>
      </div>
    </el-dialog>
    <!--用户注册表单-->
    <el-dialog
      title="注册"
      :close-on-click-modal="false"
      :visible.sync="userDialog"
      :append-to-body="true"
    >
      <el-form
        status-icon
        ref="registerFormRef"
        :model="userRegisterInfo"
        size="mini"
      >
        <el-form-item label="账 号" prop="iphone">
          <el-input type="text" v-model="userRegisterInfo.iphone"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="passWord">
          <el-input
            show-password
            type="password"
            v-model="userRegisterInfo.passWord"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="rePassWord">
          <el-input
            type="password"
            v-model="userRegisterInfo.rePassWord"
          ></el-input>
        </el-form-item>
        <el-form-item label="真实姓名" prop="name">
          <el-input type="text" v-model="userRegisterInfo.name"></el-input>
        </el-form-item>
      </el-form>
      <div class="register-button" slot="footer">
        <el-button @click="reset()">重 置</el-button>
        <el-button type="primary" @click="register()">立即注册</el-button>
      </div>
    </el-dialog>
    <!--企业注册表单-->
    <el-dialog
      title="注册"
      :close-on-click-modal="false"
      :visible.sync="entrDialog"
      :append-to-body="true"
    >
      <el-form
        status-icon
        ref="registerFormRef"
        :model="comRegisterInfo"
        size="mini"
      >
        <el-form-item label="手机号" prop="iphone">
          <el-input type="text" v-model="comRegisterInfo.iphone"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            show-password
            type="password"
            v-model="comRegisterInfo.password"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="rePassWord">
          <el-input
            type="password"
            v-model="comRegisterInfo.rePassWord"
          ></el-input>
        </el-form-item>
        <el-form-item label="企业名称" prop="comname">
          <el-input type="text" v-model="comRegisterInfo.comname"></el-input>
        </el-form-item>
      </el-form>
      <div class="register-button" slot="footer">
        <el-button @click="reset()">重 置</el-button>
        <el-button type="primary" @click="register()">立即注册</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<style>
.login {
  background: url("../assets/background01.jpg");
  width: 100%;
  height: 100%;
  position: fixed;
  background-size: 100% 100%;
}

.login_box {
  height: 300px;
  width: 450px;
  background: rgba(216, 226, 226, 0.3);
  border-radius: 3px;
  position: absolute;
  left: 75%;
  top: 35%;
  transform: translate(-50%, -50%);
}

.identity {
  position: relative;
  top: 50px;
  bottom: 10px;
  left: 100px;
}

.login_form {
  position: absolute;
  bottom: 20px;
  width: 100%;
  padding: 0px 30px;
  box-sizing: border-box;
}

.login_butt {
  display: flex;
  justify-content: center;
}
</style>

<script>
import { genTestUserSig } from "../../public/debug/GenerateTestUserSig";
export default {
  name: "login",
  data() {
    return {
      UserID: "",
      verifyCode: "",
      disableFetchCodeBtn: false,
      // 用户身份
      radio: "2",
      // 登录信息
      loginData: {
        userName: "13169080282",
        passWord: "123456",
      },
      //管理员注册对话框
      adminDialog: false,
      //用户注册对话框
      userDialog: false,
      //企业注册对话框
      entrDialog: false,
      // 管理员信息
      adminRegisterInfo: {
        iphone: "",
        passWord: "",
        rePassWord: "",
      },
      userRegisterInfo: {
        iphone: "",
        passWord: "",
        rePassWord: "",
        name: "",
      },
      comRegisterInfo: {
        iphone: "",
        password: "",
        rePassWord: "",
        comname: "",
      },
      url: null,
      urlId: null,
    };
  },
  methods: {
    handleLogin: async function() {
      // console.log("userid");
      // if (!this.UserID) {
      //   this.$message.error("请输入用户ID");
      //   return;
      // }
      const userSig = genTestUserSig(this.loginData.userName).userSig;
      const userId = this.loginData.userName;
      console.log("手机号：",userId);
      
      this.$store.commit("userLoginSuccess");
      this.$store.commit("setLoginUserInfo", {
        userId,
        userSig
      });

      // 登录 trtcCalling
      this.$trtcCalling.login({
        userID: userId,
        userSig
      });
    },
    // 重置登录框数据
    reset() {
      this.loginData.userName = "";
      this.loginData.passWord = "";
      this.userRegisterInfo.iphone = "";
      this.userRegisterInfo.passWord = "";
      this.userRegisterInfo.rePassWord = "";
      this.userRegisterInfo.name = "";
      this.adminRegisterInfo.passWord = "";
      this.adminRegisterInfo.rePassWord = "";
      this.adminRegisterInfo.iphone = "";
      this.comRegisterInfo.iphone = "";
      this.comRegisterInfo.password = "";
      this.comRegisterInfo.rePassWord = "";
      this.comRegisterInfo.comname = "";
    },
    // 登录功能
    login() {
      if (this.loginData.userName == "") {
        alert("请输入账号");
        return;
      }
      if (this.radio === "1") {
        this.url = "/admin/isLogin";
        this.urlId = "/admin/selectId";
      } else if (this.radio === "2") {
        this.url = "/user/isLogin";
        this.urlId = "/user/selectId";
      } else if (this.radio === "3") {
        this.url = "/com/isLogin";
        this.urlId = "/com/selectId";
      }
      // 接口
      var api = this.$store.state.ip + this.url;
      // 参数
      let param = new URLSearchParams();
      param.append("iphone", this.loginData.userName);
      param.append("password", this.loginData.passWord);
      // 请求函数
      this.$axios({
        method: "post",
        url: api,
        data: param,
      })
        .then((res) => {
          let result = res.data;
          // 管理员
          if (this.radio == "1") {
            if (result == 1) {
              this.updateUserId();
              // 接口
              var api = this.$store.state.ip + "/admin/state";
              // 参数
              let param = new URLSearchParams();
              param.append("id", this.$store.state.userId);
              // 请求函数
              this.$axios({
                method: "post",
                url: api,
                data: param,
              }).then((res) => {
                if (res.data == 1) {
                  this.handleLogin();
                  this.$router.push("/admin");
                } else alert("权限不足");
              });
            } else if (result == 0) {
              alert("密码错误");
            } else {
              alert("该账号未注册");
            }
            // 用户
          } else if (this.radio == "2") {
            if (result != null) {
              this.updateUserId();
              this.handleLogin();
              this.$router.push("/u");
            } else if (result == 0) {
              alert("密码错误");
            } else {
              alert("该账号未注册");
            }
            // 企业
          } else if (this.radio == "3") {
            if (result == 1) {
              this.updateUserId();
              this.handleLogin();
              this.$router.push("/hr");
            } else if (result == 0) { 
              alert("密码错误");
            } else if (result == 2) { 
              alert("无权限登录");
            } else {
              alert("该账号未注册");
            }
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 打开注册对话框
    openDialog() {
      let open = this.radio;
      if (open === "1") {
        // 管理员注册
        this.adminDialog = true;
      } else if (open === "2") {
        // 用户注册
        this.userDialog = true;
      } else if (open === "3") {
        // 企业注册
        this.entrDialog = true;
      } else {
        this.$message.error("出现未知错误");
      }
    },
    // 注册提交表单
    register() {
      // 管理员
      if (this.radio == 1) {
        // 判断账号信息是否完整
        if (
          this.adminRegisterInfo.iphone == "" ||
          this.adminRegisterInfo.passWord == "" ||
          this.adminRegisterInfo.rePassWord == ""
        ) {
          alert("请输入完整信息！");
          return;
        }
        var url = "/admin/registered";
        var api = this.$store.state.ip + url;
        let param = new URLSearchParams(this.adminRegisterInfo);
        // 请求函数
        this.$axios({
          method: "post",
          url: api,
          data: param,
        })
          .then((res) => {
            let result = res.data;
            // 管理员
            if (result == 1) {
              this.adminDialog = false;
              alert("注册成功！等待审核");
            } else if (result == 0) {
              alert("该账号已注册！");
            } else {
              alert("注册失败！");
            }
          })
          .catch((err) => {
            console.log(err);
          });
        // 用户
      } else if (this.radio == 2) {
        if (
          this.userRegisterInfo.iphone == "" ||
          this.userRegisterInfo.name == "" ||
          this.userRegisterInfo.passWord == "" ||
          this.userRegisterInfo.rePassWord == ""
        ) {
          alert("请输入完整信息！");
          return;
        }
        url = "/user/registered";
        api = this.$store.state.ip + url;
        let param;
        param = new URLSearchParams(this.userRegisterInfo);
        // 请求函数
        this.$axios({
          method: "post",
          url: api,
          data: param,
        })
          .then((res) => {
            let result = res.data;
            if (result == 1) {
              this.userDialog = false;
              alert("注册成功!");
            } else if (result == 0) {
              alert("该账号已被注册！");
            } else {
              alert("注册失败！");
            }
          })
          .catch((err) => {
            console.log(err);
          });
        // 企业
      } else if (this.radio === "3") {
        if (
          this.comRegisterInfo.iphone == "" ||
          this.comRegisterInfo.comname == "" ||
          this.comRegisterInfo.password == "" ||
          this.comRegisterInfo.rePassWord == ""
        ) {
          alert("请输入完整信息！");
          return;
        }
        url = "/com/registered";
        api = this.$store.state.ip + url;
        let param;
        param = new URLSearchParams(this.comRegisterInfo);
        // 请求函数
        this.$axios({
          method: "post",
          url: api,
          data: param,
        })
          .then((res) => {
            let result = res.data;
            if (result == 1) {
              this.entrDialog = false;
              alert("注册成功!");
            } else if (result == 0) {
              alert("该账号已被注册！");
            } else {
              alert("注册失败！");
            }
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    // 登录成功修改id 以及 用户的登记身份信息
    updateUserId() {
      // 接口
      var api = this.$store.state.ip + this.urlId;
      // 参数
      let param = new URLSearchParams();
      param.append("iphone", this.loginData.userName);
      // 请求函数
      this.$axios({
        method: "post",
        url: api,
        data: param,
      }).then((res) => {
        this.$store.commit("updateUserId", res.data);
        this.$store.commit("updateIdentity", this.radio);
        var userId = this.$store.state.userId;
        console.log("写入登录者id：", userId);
        var identity = this.$store.state.identity;
        console.log("写入登录者身份：", identity);
      });
    },
  },
};
</script>
